<template>
    <div>
        <div ref="Pie" :style="styleClass" element-loading-text="获取数据中" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.8)"></div>
    </div>
</template>
<script setup lang='ts'>
import { onMounted, onBeforeUnmount, reactive, getCurrentInstance } from 'vue';

//***引入
import * as echarts from 'echarts';
import { object, array } from 'vue-types';

const props = defineProps({
    styleClass: {
        type: Object,
        default: false
    },

    chartData: {
        type: Array<any>,
        default: false
    }



});

const data = reactive(props.chartData)


let myChart: any = null

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const initChart = () => {
    let Pie = proxy?.$refs.Pie
    // @ts-ignore
    //  基于准备好的dom，初始化echarts实例
    myChart = echarts.init(Pie);
    // 指定图表的配置项和数据
    let option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            show: false,
            color: ["#F58080", "#47D8BE"],
            data: ['昨日业绩', '今日业绩'],
            left: 'center',
            bottom: 'bottom'
        },
        grid: {
            top: 'middle',
            left: '3%',
            right: '4%',
            bottom: '3%',
            height: '80%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
            axisLine: {
                lineStyle: {
                    color: "#999"
                }
            }
        },
        yAxis: {
            type: 'value',

            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#74739D'
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#74739D"
                },
            },
            nameTextStyle: {
                color: "#74739D"
            },
            splitArea: {
                show: false
            }
        },
        series: [{
            name: '昨日业绩',
            type: 'line',
            data: [800, 900, 220, 130, 660, 289, 800, 900, 220, 130, 660, 289, 800, 900, 220, 130, 660, 289, 800, 900, 220, 130, 660, 289],
            color: "#F58080",
            lineStyle: {
                width: 5,
                color: {
                    type: 'linear',

                    colorStops: [{
                        offset: 0,
                        color: '#FF0EE1' // 0% 处的颜色
                    }, {
                        offset: 0.4,
                        color: '#F2CA00' // 100% 处的颜色
                    }, {
                        offset: 1,
                        color: '#FF0EE1' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                },
                shadowColor: 'rgba(245,128,128, 0.5)',
                shadowBlur: 10,
                shadowOffsetY: 7
            },
            itemStyle: {
                color: '#F2CA00',
                borderWidth: 5,
                // shadowColor: 'rgba(72,216,191, 0.3)',
                //  shadowBlur: 100,
                borderColor: "#F2CA00"
            },
            smooth: true
        },
        {
            name: '今日业绩',
            type: 'line',
            data: [123, 568, 111, 222, 123, 56, 123, 568, 111, 222, 123, 56, 123, 568, 111, 222, 123, 56, 123, 568, 111, 222, 123, 56],
            lineStyle: {
                width: 5,
                color: {
                    type: 'linear',

                    colorStops: [{
                        offset: 0,
                        color: '#0E5FFF' // 0% 处的颜色
                    },
                    {
                        offset: 0.4,
                        color: '#00F2EF' // 100% 处的颜色
                    }, {
                        offset: 1,
                        color: '#0E5FFF' // 100% 处的颜色
                    }
                    ],
                    globalCoord: false // 缺省为 false
                },
                shadowColor: 'rgba(71,216,190, 0.5)',
                shadowBlur: 10,
                shadowOffsetY: 7
            },
            itemStyle: {
                color: '#00F2EF',
                borderWidth: 5,
                /*shadowColor: 'rgba(72,216,191, 0.3)',
                 shadowBlur: 100,*/
                borderColor: "#00F2EF"
            },
            smooth: true
        }

        ]
    };
    option && myChart.setOption(option);
}



window.addEventListener("resize", () => {
    myChart.resize()
});

//*** 挂载Echarts
onMounted(() => {
    initChart()
})

onBeforeUnmount(() => {
    window.removeEventListener('resize', () => {
        myChart.resize()
    });
    // ResizeListener.uninstall(myChart)
})



</script>